<template>
    <!-- 最外层只能有一个组件，不能出现多个 -->
    <div class="zlst-components-uploadFile-uploadSecondStep">
        <div class="form-item" style="" v-for="(lebelObject, lIndex) in  lebelObjectArray" :key="lIndex">
            <div class="input-lebel"  >
                <span :class="lebelObject.nullable==='0'?'input-require':''">{{lebelObject.paramViewname}}</span>
            </div>
            <div  class="input-form" >
                <Select placeholder="请选择" v-model="lebelObject.mapedKey">
                    <Option :value="optionObj" v-for="(optionObj, oIndex) in selectOptionsArray" :key="oIndex">{{optionObj}}</Option>
                </Select>
            </div>
        </div>

        <div class="" style="clear: both;"></div>

        <div class="footer-btn-container">
            <Button type="primary" class="margin-right-10" @click="beforeStep">上一步</Button>
            <Button type="primary" class="margin-right-10" @click="nextStep">下一步</Button>
            <Button type="warning" class=""  @click="cancelAction">取消</Button>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            mappingField : {
                type: Object,
                default: function () {
                    return responseData.data;
                }
            },
            businessCode:{}
        },
        mounted: function () {
            // 下拉列表的options
            this.selectOptionsArray = this.mappingField.paramTitle;
            // 标题lebal的内容
            this.lebelObjectArray = [].concat(this.mappingField.cpsFimBusinessfileparamList);
            var length = this.lebelObjectArray.length;
            for(var i = 0; i < length; i++){
                var tempObj = this.lebelObjectArray[i];
                // mapedKey 用来存放用户手动选择的值
                tempObj["mapedKey"] = this.mappingField.titleMachMap[tempObj.paramName]==="" ? "{name:'',id:''}":this.mappingField.titleMachMap[tempObj.paramName] ;
            }

        },
        data: function () {
            return {
                // 下拉列表的列表值
                selectOptionsArray:[],
                // 标题列表
                lebelObjectArray:[]
            }
        },
        methods: {
//            下一步按钮触发事件
            beforeStep: function () {
                this.$emit("before-step");
            },
//            下一步按钮触发事件
            nextStep: function () {
                var length = this.lebelObjectArray.length;
                var resultObj = {
                };
                var titleMachMap = {};
                for(var i = 0; i < length; i++){
                    var tempObj = this.lebelObjectArray[i];
                    titleMachMap[tempObj.paramName] = tempObj.mapedKey
                }
                resultObj["titleMachMap"] = titleMachMap;
                resultObj["paramTitle"] = this.mappingField.paramTitle;
                resultObj["fileruleId"] = this.mappingField.fileruleId;
                resultObj["repetingProcessmode"] = this.mappingField.repetingProcessmode;
                resultObj["fileName"] = this.mappingField.fileName;
                resultObj["filePath"] = this.mappingField.filePath;
                resultObj["businessCode"] = this.businessCode;
                // 传递参数
                this.$emit("next-step",resultObj);
            },
//            取消按钮触发的事件
            cancelAction: function () {
                this.$emit("cancel");
            },
        },
    }

</script>

<style lang="scss">
    .zlst-components-uploadFile-uploadSecondStep{
        .form-item{
            float: left;
            width: 50%;
            margin-top: 10px;
            padding-left: 10px;
            .input-lebel{
                float: left;
                width: 80px;
                line-height: 30px;
            }
            .input-form{
                margin-left: 80px
            }
            .input-require{
                color: red;
            }
        }
        .footer-btn-container{
            margin-top: 15px;
            text-align: center;
            .margin-right-10{
                margin-right: 10px;
            }
        }
    }
</style>
